<template>
  <div class="component-list">
    <div class="section-title">组件</div>
    <div class="component-grid">
      <div 
        v-for="(component, index) in components" 
        :key="index"
        class="component-item"
        @click="$emit('add-component', component)"
      >
        {{ component.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    components: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style scoped>
.component-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.component-item {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;

  &:hover {
    background-color: #ebeff5;
    color: #409eff;
  }
}
</style>